<template>
	<view class="">
		<u-navbar :bgColor="bgColor" title="评价" :titleStyle="titleStyle" leftIconColor="#ffffff"
			:autoBack="true"></u-navbar>
		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view>


		<view class="evaluatepageBox">

			<view class="evaluatetype">
				<view class="title">
					是否为本房源
				</view>
				<view class="type">
					<view class="typeitem" :class="{typeitemed : currindex == index + 1}"
						v-for="(item,index) in typeList" :key="index" @click="handletype(index+1,item)">
						{{item.name}}
					</view>

				</view>

			</view>

			<view class="evaluatetype" style="margin-top: 40rpx;">
				<view class="title">
					看房满意度
				</view>
				<view class="type satisfactionbox">
					<view class="typeitem" :class="{typeitemed : satisfactionIndex == index}"
						v-for="(item,index) in satisfaction" :key="index" @click="handlesatisfactionIndexe(index,item)">
						{{item.name}}
					</view>

				</view>

			</view>
			<view class="evaluatetype" style="margin-top: 40rpx;">
				<view class="title">
					其他
				</view>
				<view class="type satisfactionbox">
					<view class="typeitems" v-for="(item,index) in lableList" :key="index"
						:class="{typeitemed : item.check == true}" @click="handlelable(index,item)"
						style="padding: 0 10rpx;">
						{{item.name}}
					</view>

				</view>

			</view>

			<view class="contentBox">
				<view class="title">
					评价内容
				</view>

				<textarea class="opinion-content" v-model="content" placeholder="请输入评价" :disabled="flag" maxlength="400"
					@input="handleSize" required>
				</textarea>

				<view class="tishi">
					{{num}}/400
				</view>

				<view class="uploadimg" style="display: flex;flex-wrap: wrap;">
					<view v-if="imgs.length>0" class="" v-for="(item,index) in imgs" style="position: relative;">
						<image class="searchIcon" :src="item"
							style="width: 204rpx; height: 204rpx; margin-right: 7rpx;">
							<view class="icon" @click="handledelimg(index)">
								<u-icon color="#666666" size="20" name="close-circle"></u-icon>
							</view>
					</view>

					<image class="searchIcons" src="http://120.76.245.175/uploads/image/upload.png"
						style="width: 204rpx; height: 204rpx;" @click="uploadzhaopian">

				</view>


			</view>

		</view>
		<view class="" style="height: 230rpx;"></view>

		<view class="btnBox">
			<view class="submit" @click="$u.debounce(handleEvaluate, 500)">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		evaluate,
		evaluatelabel
	} from "@/api/api.js"
	export default {
		data() {
			return {
				is_housing: "1",
				satisfactiontext: "非常满意",
				content: "",
				images: "",
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				typeList: [{
						name: "是",
						id: 1
					},
					{
						name: "不是",
						id: 2
					}
				],
				currindex: 1,
				satisfaction: [{
						name: "非常满意",
						id: 1
					},
					{
						name: "满意",
						id: 2
					},
					{
						name: "一般",
						id: 3
					},
					{
						name: "不满意",
						id: 4
					},
					{
						name: "非常不满意",
						id: 5
					},
				],
				satisfactionIndex: 0,
				content: "",
				num: 0,
				flag: false,
				pageId: "",
				imgs: [],
				lableList: [],
				lableIds: []

			}
		},
		onLoad(options) {
			console.log("options", options)
			this.pageId = options.id

			this.getNavbarHeight()
			this.getevaluatelabel()
		},
		methods: {
			async getevaluatelabel() {
				let res = await evaluatelabel()
				console.log("评价参数", res)
				this.lableList = res.data
				this.lableList.forEach((item, index) => {
					item.check = false
				})
			},
			handlelable(index, item) {
				console.log("index", index)
				this.lableList[index].check = !this.lableList[index].check
				this.$forceUpdate()
			},
			handledelimg(index) {
				console.log("66666666")
				this.imgs.splice(index, 1)
			},
			handletype(index, item) {
				this.currindex = index
				this.is_housing = index
			},
			handlesatisfactionIndexe(index, item) {
				this.satisfactionIndex = index
				this.satisfactiontext = item.name
			},
			handleSize() {
				this.num = this.content.length
				if (this.content.length >= 400) {
					uni.showToast({
						title: '最多可输入400个文字！',
						duration: 2000,
						icon: "none",
					});
					this.flag = true
					return
				}
			},
			uploadzhaopian() {
				let that = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://youcaius.top/api/index/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								// formData: {
								// 	'user': 'test'
								// },
								success: (uploadFileRes) => {
									console.log("图片路径//////", JSON.parse(uploadFileRes.data).data);
									if (that.imgs.length >= 9) {
										uni.showToast({
											title: '最多可上传9张图片！',
											duration: 1000,
											icon: "none",
										});
									} else {
										that.imgs.push(JSON.parse(uploadFileRes.data).data)
									}
								},
								fail(e) {
									console.log("上传图片", e)
								}
							});
						}
					}
				});


			},

			async handleEvaluate() {
				this.lableIds = []
				this.lableList.forEach((item,index)=>{
					if(item.check == true){
						this.lableIds.push(item.id)
					}
				})
				// console.log("ids",this.lableIds.toString())
				// console.log("this.images", this.imgs)
				if (this.content == "") {
					uni.showToast({
						title: '请输入评价内容！',
						icon: "none",
						duration: 1000
					});
					return
				}

				// if (this.imgs.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择图片！',
				// 		icon: "none",
				// 		duration: 1000
				// 	});
				// 	return
				// }
			

				let data = {
					order_id: this.pageId,
					is_housing: this.is_housing,
					satisfaction: this.satisfactiontext,
					content: this.content,
					images: this.imgs.join(","),
					label:this.lableIds.toString()
				}
				console.log("data", data)
				let res = await evaluate(data)
				if (res.code == 1000) {
					uni.showToast({
						title: '评价成功！',
						icon: "none",
						duration: 1000
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1000
					});
				}
			},
			getNavbarHeight() {

				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},
		}
	}
</script>

<style scoped lang="scss">
	.searchIcon:nth-child(3n) {
		margin-right: 0;
	}

	.icon {
		position: absolute;
		top: -14rpx;
		right: -14rpx;
	}

	.evaluatepageBox {
		width: 690rpx;
		// height: 1106rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;

		.evaluatetype {

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
			}

			.type {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.typeitem {
					width: 146rpx;
					height: 56rpx;
					background: #CACACA;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					margin-right: 10rpx;
					margin-bottom: 30rpx;
				}

				.typeitems {
					// width: 146rpx;
					height: 56rpx;
					background: #CACACA;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					margin-right: 10rpx;
					margin-bottom: 30rpx;
				}

				.satisfactionitem {
					width: 146rpx;
					height: 56rpx;
					background: #CACACA;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					margin-right: 20rpx;
				}

				.typeitemed {
					background-color: #F8AD22;
				}

			}
		}


		.contentBox {
			position: relative;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
			}

			.opinion-content {
				width: 630rpx;
				height: 320rpx;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
			}

			.tishi {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				position: absolute;
				right: 15rpx;
				top: 340rpx;
			}

			.uploadimg {
				margin-top: 30rpx;
			}
		}


	}

	.btnBox {
		width: 100%;
		// background-color: #ffffff;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */

		.submit {
			width: 640rpx;
			height: 88rpx;
			background: #F8AD22;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 35rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 30rpx auto;
		}
	}
</style>